<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图文消息</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/layui/css/layui.css"
	media="all" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<style type="text/css">
textarea {
	resize: none !important;
	width: 550px !important;
	height: 150px !important;
}

#mydiv {
	margin-top: 30px !important;
}
</style>

<script>
			layui.use(['form', 'layer', 'laydate', 'jquery', 'table', 'laytpl'], function() {
				var form = layui.form,
					layer = parent.layer === undefined ? layui.layer : top.layer,
					$ = layui.jquery,
					laydate = layui.laydate,
					laytpl = layui.laytpl,
					table = layui.table;

				$(function() {
					$("#sendText").click(function() {
						var paramStr = $("#myForm").serialize();
						$.get("/message/sendText", paramStr, function(res) {
							// console.debug(res.message)
							layer.open({
								title: '温馨提示',
								content: res.message
							});
						})
					})
				})
			});
		</script>

</head>

<body>

	<blockquote class="layui-elem-quote layui-text">
		温馨提示：每个用户每个月只能接收四条推送的消息，请酌情进行消息推送！！！</blockquote>
	<div id="mydiv">
		<form class="layui-form" id="myForm">

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">编辑消息</label>
				<div class="layui-input-block">
					<textarea placeholder="请输入消息内容" class="layui-textarea"
						style="border-color: black" name="content"></textarea>
				</div>
				<div style="margin-top: 15px">
					<label class="layui-form-label">添加图片</label>
					<div class="layui-upload">
						<a type="file" class="layui-btn" id="upload" name="image">上传图片</a>
						<div class="layui-upload-list">
							<img class="layui-upload-img" id="demo1"
								style="width: 100px; height: 100px; margin-left: 100px;">
							<p id="demoText" style="margin-left: 100px"></p>
						</div>
					</div>
				</div>

				<div class="layui-form-item" style="margin-top: 15px">
					<label class="layui-form-label">消息接收人</label>
					<div class="layui-input-block">
						<input name="users" title="今天的用户" type="radio" value="1">
						<input name="users" title="一周内的用户" type="radio" value="2">
						<input name="users" title="一个月内的用户" type="radio" value="3">
						<input name="users" title="全部" type="radio" value="4">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<a class="layui-btn" type="sumbit" id="sendText">立即提交</a>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</div>
		</form>
	</div>

</body>

<script type="text/javascript">
		layui.use(['form','layer','laydate','jquery','table','laytpl','upload'], function(){
			 var form = layui.form,
		        layer = parent.layer === undefined ? layui.layer : top.layer,
		        $ = layui.jquery,
		        laydate = layui.laydate,
		        laytpl = layui.laytpl,
		        table = layui.table,
		  		upload = layui.upload;
			 
			 
			 
		  
		  //普通图片上传
		  var uploadInst = upload.render({
		    elem: '#upload'
		    ,url: '/message/uploadImage'
		    ,before: function(obj){
		      //预读本地文件示例
		      obj.preview(function(index, file, result){
				// console.debug(index);
				// console.debug(file);
				// console.debug(result);
		        $('#demo1').attr('src', result); //图片链接（base64）
		      });
		    }
		    ,done: function(res){
		      //如果上传失败
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }
		      //上传成功
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		  });
		  
		});
	
	</script>






</html>